<template>
    <div class="notice">
        <Header v-if="showHeader" title="消息中心"></Header>
        <!-- <van-nav-bar title="消息中心" :fixed="true" left-arrow @click-left="onClickLeft"></van-nav-bar> -->
        <!--滑动区域 ref='mescroll'不能删, 目的是路由切换时可通过ref调用mescroll-vue组件的beforeRouteEnter方法-->
        <mescroll-vue ref="noticeTypeMescroll" :up="mescrollUp" @init="mescrollInit">
            <ul id="noticeType">
                <li class="notice_item" v-for="(item,index) in list" :key="index" @click="goNoticeList(item)">
                    <div class="notice_item_info">
                        <div class="notice_item_icon">
                            <img :src="item.icon" :alt="item.name">
                            <i v-if="item.unread_message !='0' "></i>
                        </div>
                        <div class="notice_item_desc">
                            <h3>{{item.name}} <span>{{item.newest_time}}</span></h3>
                            <p class="one-txt-cut">{{item.newest_message}}</p>
                        </div>
                    </div>
                    <van-icon name="arrow" />
                </li>
            </ul>
        </mescroll-vue>
        <Loading v-show = "showLoading"></Loading>
    </div>
</template>
<script>
import MescrollVue from 'mescroll.js/mescroll.vue';
import { noticeTypeList } from "@/request/api.js";
import Loading from "@/components/Loading.vue";
import Header from "@/components/Header.vue";
export default {
    name:'Notice',
    data(){
        return {
            showHeader:this.$store.state.showHeader,
            showLoading: true,
            list: [],
            mescroll: null,
            mescrollUp: {
                callback: this.upCallback, // 上拉回调,此处可简写; 相当于 callback: function (page, mescroll) { getListData(page); }
                page: {
                    num: 0, // 当前页码,默认0,回调之前会加1,即callback(page)会从1开始
                    limit: 10 // 每页数据的数量
                },
                noMoreSize: 5, // 如果列表已无数据,可设置列表的总数量要大于等于5条才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看
                empty: {
                    // 列表第一页无任何数据时,显示的空提示布局; 需配置warpId才生效;
                    warpId: 'noticeType', // 父布局的id;
                    tip: '暂无相关数据~', // 提示
                },
                htmlNodata: '<p class="upwarp-nodata">没有更多了~</p>', // 无数据的布局
            },
        }
    },
    components:{Loading,MescrollVue,Header},
    mounted(){this.showLoading = false;},
    methods:{
        // mescroll组件初始化的回调,可获取到mescroll对象
        mescrollInit (mescroll) {
            this.mescroll = mescroll
        },
        // 上拉回调 page = {num:1, size:10}; num:当前页 ,默认从1开始; size:每页数据条数,默认10
        upCallback (page,mescroll) {
            // console.log('pages'+page.num)
            // 联网加载数据
            noticeTypeList({
                token:this.$store.state.token,
                page:page.num,
                page_num:page.limit
            }).then(res=>{
                let list = res.data;
                // console.log(list)
                if (page.num==1) {
                    this.list = list.types;
                } else {
                    this.list = this.list.concat(list.types);
                }
                
                // 数据渲染成功后,隐藏下拉刷新的状态
                this.$nextTick(() => {
                    mescroll.endSuccess(list.types.length)
                })
            }).catch(error=>{
                console.log(error);
                mescroll.endErr()
            })
        },
        // onClickLeft(){
        //     // 后退一步记录，等同于 history.back()
        //     this.$router.go(-1)
        // },
        goNoticeList(item){
            // console.log(item)
            let url = item.url;
            // console.log(url.split('#')[1])
            // console.log(url.query)
            this.$router.push({ name: "noticeList", query: { type_id:item.id,title:item.name } });
            // this.$router.push({name:'noticeList',query:{data:item}})
        }
    },
}
</script>
<style lang="less" scoped>
.notice{
    width: 100%;
    height: 100%;
    background: #fff;
    box-sizing: border-box;
    .notice_item{
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 15px 0;
        box-sizing: border-box;
        background: #fff;
        cursor: pointer;
        .notice_item_info{
            width: 100%;
            font-size: 12px;
            font-family: 'PingFang-SC-Medium';
            color: #666;
            overflow: hidden;
            display: flex;
            justify-content: flex-start;
            align-items: center;
            .notice_item_icon{
                position: relative;
                img{
                    width: 31px;
                    height: 31px;
                }
                i{
                    width: 8px;
                    height: 8px;
                    border-radius: 50%;
                    background: #ff2a00;
                    position: absolute;
                    top: 0;
                    right: 0;
                }
            }
            .notice_item_desc{
                width: 100%;
                padding: 0 15px;
                box-sizing: border-box;
                overflow: hidden;
                h3{
                    font-size: 14px;
                    color: #151617;
                    font-family: 'PingFang-SC-Bold';
                    span{
                        font-size: 12px;
                        color: #999;
                        font-family: 'PingFang-SC-Medium';
                        float: right;
                        font-weight: normal;
                    }
                }
                p{
                    margin-top: 6px;
                }
            }
        }
        .van-icon{font-size: 15px;color: #999;}
    }
}
// .van-nav-bar{
//     height: 44px;
//     line-height: 44px;
//     font-family: 'PingFang-SC-Bold';
//     .van-nav-bar__title{
//         color: #151617;
//         font-size: 17px;
//     }
// }
// /deep/ .van-nav-bar .van-icon{color: #626466;font-size: 17px;}
.mescroll {
    position: fixed;
    padding: 0 15px;
    box-sizing: border-box;
    background: #fff;
    top: 0;
    bottom: 0;
    height: auto;
}
</style>